<!--我的数据-->
<template>
	<view>

		<view class="clearfloat mb30">
			<view class="chitem" :class="item.ch ? 'chitem-act' : ''" v-for="(item , i) in list" @click="chti(i)">
				{{item.name}}
			</view>
		</view>

		<view class="bj_between mb40">

			<view class="f24">
				Tempo
			</view>
			<view class="example-body">
				<uni-datetime-picker type="daterange" style="height: 100%;width: 100%;" :clear-icon="false"
					v-model="single" @change="maskClick"></uni-datetime-picker>
			</view>
		</view>
		<view class="bj_between mb30">
			<view class="f30 fwb">
				{{$t("fx.data.tit5")}}
			</view>
			<view class="fx2b f22 bj_center" @click="tocz">
				<text>{{$t("fx.tit2")}}</text>
				<image src="/static/lm/next.png"></image>
			</view>
		</view>
		<view class="bj_between mb40 ca2">
			<view class="w33">
				<view class="f22 mb10">
					{{$t("fx.data.tab1.tit1")}}
				</view>
				<view class="f36 fwb cy">
					{{info.user.children_count}}
				</view>
			</view>
			<view class="w33">
				<view class="f22 mb10">
					{{$t("fx.data.tab1.tit2")}}
				</view>
				<view class="f36 fwb cy">
					{{info.user.team_count}}
				</view>
			</view>
			<view class="w33">
				<view class="f22 mb10">
					{{$t("fx.data.tab1.tit3")}}
				</view>
				<view class="f36 fwb cy">
					{{$t("menu.$")}}{{info.user.bonus_all}}
				</view>
			</view>
		</view>

		<view class="f30 fwb mb20">
			{{$t("fx.data.tit6")}}
		</view>

		<view class="dataitem mb20" v-for="item in djlist">
			<view class="dataitem-tit">
				{{item.name}}
			</view>
			<view class="dataitem-txtbox bj_left">
				<view class="dataitem-txtbox-txtitem">
					<view class="cy f36 fwb mb10">
						{{item.n1}}
					</view>
					<view class="ca2 f20">
						{{$t("fx.data.tab2.tit1")}}
					</view>
				</view>
				<view class="dataitem-txtbox-txtitem">
					<view class="cy f36 fwb mb10">
						{{$t("menu.$")}}{{item.n2}}
					</view>
					<view class="ca2 f20">
						{{$t("fx.data.tab2.tit2")}}
					</view>
				</view>
				<view class="dataitem-txtbox-txtitem">
					<view class="cy f36 fwb mb10">
						{{$t("menu.$")}}{{item.n3}}
					</view>
					<view class="ca2 f20">
						{{$t("fx.data.tab2.tit3")}}
					</view>
				</view>
			</view>
		</view>

		<zero-loading type="surround" v-if="loading"></zero-loading>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import useI18n from '@/store/useI18n.js'
	import {
		onShow
	} from "@dcloudio/uni-app"
	import common from '../../js/common';
	let loading = ref(false)
	const {
		t
	} = useI18n()

	let single = ref([])
	let dinfo = ref({})
	let list = ref([{
			name: t("fx.data.tit1"),
			ch: true
		},
		{
			name: t("fx.data.tit2"),
			ch: false
		},
		{
			name: t("fx.data.tit3"),
			ch: false
		},
		{
			name: t("fx.data.tit4"),
			ch: false
		}
	])

	let djlist = ref([{
			name: t("fx.n1.lt1"),
			n1: "--",
			n2: "--",
			n3: "--"
		},
		{
			name: t("fx.n1.lt2"),
			n1: "--",
			n2: "--",
			n3: "--"
		},
		{
			name: t("fx.n1.lt3"),
			n1: "--",
			n2: "--",
			n3: "--"
		}
	])

	function chti(v) {
		dinfo.value = {}
		for (var i = 0; i < list.value.length; i++) {
			list.value[i].ch = false
		}
		list.value[v].ch = true
		let now = new Date()
		if (v == 0) {
			single.value = []
		} else if (v == 1) { //今天
			let t = now.getFullYear() + "-" + common.bl(now.getMonth() + 1) + "-" + common.bl(now.getDate())
			single.value = [
				t, t
			]
			dinfo.value.dateType = 1
		} else if (v == 2) { //昨天
			now.setDate(now.getDate() - 1)
			let t = now.getFullYear() + "-" + common.bl(now.getMonth() + 1) + "-" + common.bl(now.getDate())
			single.value = [
				t, t
			]
			dinfo.value.dateType = 2
		} else if (v == 3) { // 上周
			let di = common.getLastWeekRange()
			single.value = [
				di.firstDayStr, di.lastDayStr
			]
			dinfo.value.start_date = di.firstDayStr
			dinfo.value.end_date = di.lastDayStr
		}
		winit()
	}

	function maskClick(e) {
		dinfo.value = {}
		dinfo.value.start_date = single.value[0]
		dinfo.value.end_date = single.value[1]
		winit()
		// console.log(e);
		// console.log(single.value);
	}

	let info = ref({})
	onShow(function() {
		winit()
	})

	function winit() {
		loading.value = true
		common.inviteDetails(dinfo, {
			"token": getApp().globalData.userInfo.token
		}).then(res => {
			// getApp().globalData.userInfo.user = res.data.user
			info.value = res.data
			djlist.value[0].n1 = info.value.child.lv_1_team_bet
			djlist.value[0].n2 = info.value.child.lv_1_team_commission
			djlist.value[0].n3 = info.value.child.lv_1_team_count

			djlist.value[1].n1 = info.value.child.lv_2_team_bet
			djlist.value[1].n2 = info.value.child.lv_2_team_commission
			djlist.value[1].n3 = info.value.child.lv_2_team_count

			djlist.value[2].n1 = info.value.child.lv_3_team_bet
			djlist.value[2].n2 = info.value.child.lv_3_team_commission
			djlist.value[2].n3 = info.value.child.lv_3_team_count
			loading.value = false
		})

	}

	function tocz() {
		uni.navigateTo({
			url: "/pages/index/tx?v=1"
		})
	}
</script>

<style scoped lang="scss">
	.example-body {
		width: 612rpx;
		padding: 10px;
	}

	.chitem {
		float: left;
		min-width: 136rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 24rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #fff;
		background: #001F0A;
		margin-right: 10rpx;
		padding: 0 20rpx;
	}

	.chitem-act {
		color: #FFFFFF;
		background: #098B34;
	}

	.fx2b {
		width: 156rpx;
		height: 44rpx;
		background: #001F0A;
		border-radius: 100rpx;

		image {
			margin-left: 6rpx;
			width: 16rpx;
			height: 16rpx;
		}

		&-item {
			width: 50%;
			padding-left: 10rpx;
		}
	}

	.dataitem {
		position: relative;
		background: #00561D;
		border-radius: 20rpx;

		&-tit {
			background-color: #FFBE32;
			border-radius: 20rpx 0rpx 20rpx 0rpx;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			width: 140rpx;
			height: 48rpx;
			line-height: 48rpx;
			left: 0;
			top: 0;
			position: absolute;
		}

		&-txtbox {
			padding: 68rpx 38rpx 32rpx;

			&-txtitem {
				width: 33.33%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				position: relative;
			}

			&-txtitem:after {
				content: "";
				border: solid;
				border-width: 2rpx 0 0 0;
				border-image: linear-gradient(90deg, rgba(15, 25, 77, 1), rgba(255, 255, 255, 1), rgba(15, 25, 77, 1)) 2 2;
				position: absolute;
				bottom: 50%;
				right: -5%;
				width: 76rpx;
				transform: rotate(90deg);
			}

			&-txtitem:last-child:after {
				border: none;
			}
		}
	}
</style>